<template>
  <div class="userCenter" v-if="userInfo">
    <img @click="handleDialog" class="avatar_icon glyphicon glyphicon-cog" src="../../assets/images/shezhi.png">
    <div class="user_avatar">
      <img v-if="userInfo.avatar" style="border-radius: 50%;width: 50px;height: 50px" :src="$imgUrl + userInfo.avatar">
      <span v-else class="avatar">
        <span >{{userInfo.username || '未知用户' | formatString}}</span>
      </span>
    </div>
    <div class="user_name">{{userInfo.username || '未知用户'}}</div>
    <div class="user_cell">
      <div>
        <span>关注用户</span>
        <span class="num">{{userInfo.follow.length}}</span>
      </div>
      <div>
        <span>发表文章</span>
        <span class="num">{{userInfo.article.length}}</span>
      </div>
    </div>
    <el-dialog
        title="修改资料"
        :visible.sync="editDialogVisible"
        width="25%"
        :modal="false"
        center>
        <div class="editDialog">
          <el-upload
            class="avatar-uploader"
            :action="$imgApi"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            >
            <img v-if="imageUrl" :src="$imgUrl + imageUrl" class="avatar">
            <img v-else style="border-radius: 50%;width: 50px;height: 50px" :src="$imgUrl + userInfo.avatar">
          </el-upload>
          <div>
          <!--   <label style="width:20%">用户名：</label> -->
            <el-input style="text-align: center" v-model="username"></el-input>
          </div>
          <div style="margin-top:30px">
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="colseForm">取消</el-button>
          </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data () {
    return {
      username:'',
      imageUrl:'',
      userInfo:{},
      editDialogVisible:false
    }
  },
  props: {
    userInfo: {
      type: Object,
      default: () => {}
    },
  },
  mounted () {
    
  },
  methods: {
    handleAvatarSuccess(res, file) {
        console.log(res);
        this.imageUrl = res.data.data;
    },
    handleDialog(){
      this.editDialogVisible = true
      this.username = this.userInfo.username
    },
    colseForm(){
       this.editDialogVisible = false
    },
    submitForm(){
      let params = {
         username:this.username,
         avatar: this.imageUrl
      };
      this.$api.editUser(params)
           .then(res => {
          if(res.code == 200){
            this.$message({
                message: '修改成功',
                type: 'success'
            });
            this.colseForm()
            this.getUser()
          }
      })
    },
  },
  components: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './index.less';

</style>